import React, { Component } from 'react'
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
  withRouter
} from 'react-router-dom'
const Home = (props) => { // component
  console.log('首页', props)
  const toPage = () => {
    props.history.push('/user')
  }
  return (<div>
    首页
    <button onClick = { toPage }>个人中心</button>
  </div>)
}
// 如果需要使用编程式跳转，保险起见，暴露组件时使用 withRouter包裹
const Kind = withRouter((props) => { // children
  console.log('分类', props)
  const toPage = () => {
    props.history.push('/user')
  }
  return (<div>
    分类
    <button onClick = { toPage }>个人中心</button>
  </div>)
})
const Cart = withRouter((props) => { // render
  console.log('购物车', props)
  const toPage = () => {
    props.history.push('/user')
  }
  return (<div>
    购物车
    <button onClick = { toPage }>个人中心</button>
  </div>)
})
const User = (props) => { // component
  console.log('个人中心', props)
  return (<div>
    个人中心
    <button onClick={ () => {
      props.history.goBack()
    }}>返回</button>
  </div>)
}
const NotFound = () => (<div>404</div>)
// 通过组件的 props.history 属性完成路由的编程式跳转
// 但是 children 以及 render 定义的路由， props 找不到 history 对象
// 一种使用 component 定义路由 
// 另外一种，使用 高阶组件 withRouter 包裹路由定义的组件
export default class App extends Component {
  render() {return (
      <Router>
        <Switch>
          {/* 定义路由的三种方式 */}
          {/* component形式 */}
          <Route path="/home" component = { Home } />
          {/* chidlren形式 */}
          <Route path="/kind">
            <Kind />
          </Route>
          {/* render形式 */}
          <Route path="/cart" render = { () => <Cart/> } />
          <Route path="/user" component = { User } />
          <Redirect path="/" exact = { true } to="/home" />
          <Route path="*" component = { NotFound } />
        </Switch>

        
      </Router>
    )
  }
}
